<!-- 无接口待开发 -->
<script setup lang="ts">
  import { PropType, ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import { getName, getUserJob } from '@/utils/auth';
  import { saveOrUpdateCarInventory } from '@/api/les';
  import { selectedOption } from '@/api/system-basic/types';
  import { number } from 'echarts';

  const props = defineProps({
    typeOptions: Array as PropType<selectedOption[]>,
  });

  const form = ref({
    carCode: '',
    // carIsEmpty: '',
    carStation: '',
    carStatus: '',
    carType: number as any,
    remark: '',
    lesCarInventoryId: '',
    updateUser: '',
  });

  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();

  // 监听弹框
  watch(
    () => booleanStore.boolValue2,
    (newValue: boolean) => {
      if (booleanStore.num2 === 19) showDrawer.value = newValue;
    }
  );
  watch(
    () => booleanStore.row,
    () => {
      if (booleanStore.num2 === 19) {
        form.value = {
          carCode: booleanStore.row.carCode,
          // carIsEmpty: booleanStore.row.carIsEmpty,
          carStation: booleanStore.row.carStation,
          carStatus: booleanStore.row.carStatus,
          carType: booleanStore.row.carType,
          remark: booleanStore.row.remark,
          lesCarInventoryId: booleanStore.row.lesCarInventoryId,
          updateUser: getName() as string,
        };
      }
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool2(19);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool2(19);
  }

  const formRef = ref<any>('');

  const rules = {
    carCode: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    carStation: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    carStatus: [
      { required: true, message: '不能为空' },
      {
        validator: (value: any, cb: any) => {
          if (value && value.length > 30) {
            cb('不能超过30位字符');
          } else {
            cb();
          }
        },
      },
    ],
    // carType: [
    //   { required: true, message: '不能为空' },
    //   {
    //     validator: (value: any, cb: any) => {
    //       if (value && value.length > 30) {
    //         cb('不能超过30位字符');
    //       } else {
    //         cb();
    //       }
    //     },
    //   },
    // ],
  };

  async function handleOk(done: any) {
    const res = await formRef.value.validate();
    if (res) {
      done(false);
    } else {
      const data = await saveOrUpdateCarInventory(form.value);
      if (data.retCode === '200') {
        Notification.success({
          title: '成功',
          content: data.message,
          closable: true,
        });

        booleanStore.toggleBool2(19);
        booleanStore.watchUpdate(29);
      } else {
        Notification.error({
          title: '失败',
          content: data.message,
          closable: true,
        });
        // booleanStore.toggleBool2(19);
      }
      
      done();
    }
  }
</script>

<template>
  <a-drawer
    :width="500"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 修改缓存箱 </template>
    <div>
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :style="{ width: '450px' }"
      >
        <a-form-item field="carCode" label="车辆编码:">
          <a-input
            v-model="form.carCode"
            max-length="20"
            placeholder="车辆编码"
          />
        </a-form-item>
        <a-form-item field="carType" label="车辆类型:">
          <a-select
            v-model="form.carType"
            placeholder="车辆类型"
            :options="props.typeOptions"
          />
        </a-form-item>
        <a-form-item field="carStation" label="站点地址:">
          <a-input
            v-model="form.carStation"
            max-length="20"
            placeholder="站点地址"
          />
        </a-form-item>
        <!-- <a-form-item field="carStatus" label="车辆状态:">
          <a-select v-model="form.carStatus" placeholder="车辆状态">
            <a-option value="0">维修中</a-option>
            <a-option value="1">可使用</a-option>
            <a-option value="2">正在使用</a-option>
          </a-select>
        </a-form-item> -->

        <!-- <a-form-item field="carIsEmpty" label="是否空车:">
          <a-select v-model="form.carIsEmpty" placeholder="是否空车">
            <a-option value="0">空车</a-option>
            <a-option value="1">非空车</a-option>
          </a-select>
        </a-form-item> -->
        <a-form-item field="remark" label="备注:">
          <a-input v-model="form.remark" max-length="128" placeholder="备注" />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
